import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    if(nextProps.content !== this.props.content) {
      return true;
    }else {
      return false;
    }
  }

  render() {
    const { content, test } = this.props;
    // JSX -> createElement -> 虚拟DOM(JS 对象) -> 真实的DOM
    return (
      <div>
        <li
          dangerouslySetInnerHTML={{ __html: content}}
          onClick={this.handleClick}
        ></li>
      </div>
    )
  }

  handleClick() {
    const { deleteItem, index } = this.props;
    deleteItem(index);
  }
}

// 检测数据类型
TodoItem.propTypes = {
  test: PropTypes.string.isRequired,      // isRequired 必须传值
  content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  deleteItem: PropTypes.func,
  index: PropTypes.number
}

// 添加默认值
TodoItem.defaultProps = {
  test: 'hello world'
}

export default TodoItem;